<template>
  <div class="org-pannel">
    <div class="header">
      <div class="search">
        <span>搜索</span>
      </div>
      <div class="manage">
        <span>显示视图</span>
      </div>
    </div>
    <div class="body">
      <div class="org-tree">
        <el-tree
          :props="props"
          :load="loadNode"
          lazy
          show-checkbox
          @check-change="handleCheckChange"
        ></el-tree>
      </div>
      <div class="org-seleted">
        <ul>
          <li :key="item.id" v-for="item in selectObjs">
            <dl :title="item.title">
              <dt>
                <i :class="getIcon(item)"></i>
              </dt>
              <dd>{{item.title}}</dd>
              <dd class="delete" title="删除">
                <i class="el-icon-circle-close"></i>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Organization",
  data() {
    return {
      props: {
        label: "name",
        children: "zones"
      },
      count: 1,
      selectObjs: [
        {
          id: "1",
          type: "user", // user = 人, depart = 部门
          title: "张三"
        },
        {
          id: "2",
          type: "user", // user = 人, depart = 部门
          title: "李四"
        },
        {
          id: "3",
          type: "user", // user = 人, depart = 部门
          title: "王五"
        },
        {
          id: "4",
          type: "user", // user = 人, depart = 部门
          title: "李松"
        },
        {
          id: "5",
          type: "user", // user = 人, depart = 部门
          title: "张奎"
        },
        {
          id: "6",
          type: "user", // user = 人, depart = 部门
          title: "武宋"
        },
        {
          id: "7",
          type: "depart", // user = 人, depart = 部门
          title: "机关党群部门"
        },
        {
          id: "8",
          type: "depart", // user = 人, depart = 部门
          title: "党委会"
        },
        {
          id: "9",
          type: "depart", // user = 人, depart = 部门
          title: "生产单位"
        }
      ]
    };
  },
  props: {},
  created() {},
  mounted() {},
  methods: {
    getIcon(row) {
      switch (row.type) {
        case "user":
          return "el-icon-s-custom";
        case "depart":
          return "el-icon-s-home";
        default:
          return "";
      }
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      console.log(data);
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        return resolve([{ name: "region1" }, { name: "region2" }]);
      }
      if (node.level > 3) return resolve([]);
      var hasChild;
      if (node.data.name === "region1") {
        hasChild = true;
      } else if (node.data.name === "region2") {
        hasChild = false;
      } else {
        hasChild = Math.random() > 0.5;
      }
      setTimeout(() => {
        var data;
        if (hasChild) {
          data = [
            {
              name: "zone" + this.count++
            },
            {
              name: "zone" + this.count++
            }
          ];
        } else {
          data = [];
        }
        resolve(data);
      }, 500);
    }
  }
};
</script>
<style scoped>
.org-pannel {
  min-width: 400px;
  min-height: 500px;
  height: 500px;
  width: 700px;
  margin: 5px;
  border: solid 1px #eeeeee;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.org-pannel .header {
  display: flex;
  border-bottom: solid 1px #eeeeee;
  height: 35px;
  line-height: 35px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  text-indent: 10px;
}
.org-pannel .body {
  width: 100%;
  height: 100%;
  display: flex;
}
.org-pannel .header .search,
.org-pannel .org-tree {
  min-width: 300px;
}
.org-pannel .header .manage {
  flex: 1;
}
.org-tree {
  height: 100%;
  overflow: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-right: solid 1px #eeeeee;
  padding: 10px;
}
.org-seleted {
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 10px;
}
.org-seleted ul {
  margin: 0px;
  padding: 0px;
  width: 100%;
  padding: 2px 10px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.org-seleted ul li {
  list-style: none;
  width: 22%;
  margin: 10px 5px;
  display: inline-block;
}
.org-seleted dl {
  text-align: center;
  margin: 0px;
  cursor: pointer;
  position: relative;
}
.org-seleted dl:hover dd.delete {
  display: block;
}
.org-seleted dl dt {
  font-size: 40px;
}
.org-seleted dl dd {
  width: 100%;
  margin: 0px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.org-seleted dl dd.delete {
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 18px;
  display: inline-block;
  width: fit-content;
  display: none;
}
.org-seleted dl dd.delete i {
  display: block;
}
.org-seleted dl dd.delete:hover {
  color: red;
}
.org-seleted dl dt i.el-icon-s-custom {
  color: #82a3c5;
}
.org-seleted dl dt i.el-icon-s-home {
  color: #d26f86;
}
</style>